<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ isEdit ? '修改商品评价' : '新增商品评价' }}</span>
      </div>
      
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="商品ID" prop="productId">
            <id-selector
              v-model="form.productId"
              :api-function="listProduct"
              :get-api-function="getProduct"
              id-field="productId"
              name-field="productName"
              :extra-columns="[
                { prop: 'productName', label: '商品名称', width: 200 },
                { prop: 'price', label: '价格', width: 100 },
                { prop: 'stock', label: '库存', width: 100 }
              ]"
              placeholder="请选择商品"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="订单ID" prop="orderId">
            <id-selector
              v-model="form.orderId"
              :api-function="listOrder"
              :get-api-function="getOrder"
              id-field="orderId"
              name-field="orderNo"
              :extra-columns="[
                { prop: 'orderNo', label: '订单号', width: 180 },
                { prop: 'totalAmount', label: '订单金额', width: 120 },
                { prop: 'orderStatus', label: '订单状态', width: 100 }
              ]"
              placeholder="请选择订单"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="用户ID" prop="userId">
            <id-selector
              v-model="form.userId"
              :api-function="listUser"
              :get-api-function="getUser"
              id-field="userId"
              name-field="userName"
              :extra-columns="[
                { prop: 'userName', label: '用户名称', width: 150 },
                { prop: 'nickName', label: '用户昵称', width: 150 },
                { prop: 'email', label: '邮箱', width: 200 }
              ]"
              placeholder="请选择用户"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="用户昵称" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户昵称" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="评分" prop="star">
            <el-input v-model="form.star" placeholder="请输入评分" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="显示状态" prop="showStatus">
            <el-radio-group v-model="form.showStatus">
              <el-radio
                v-for="dict in dict.type.ec_show_status"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      

      
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="评价内容" prop="content">
            <el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入评价内容" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="评价图片" prop="images">
            <image-upload v-model="form.images" :limit="5" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="商家回复" prop="replyContent">
            <el-input v-model="form.replyContent" type="textarea" :rows="4" placeholder="请输入商家回复" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="回复时间" prop="replyTime">
            <el-date-picker clearable
              v-model="form.replyTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择回复时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item style="text-align: center; margin-top: 30px;">
        <el-button type="primary" @click="submitForm" :loading="loading">{{ isEdit ? '修改' : '新增' }}</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
import { getComment, addComment, updateComment } from "@/api/fun/comment"
import { listProduct, getProduct } from "@/api/fun/product"
import { listOrder, getOrder } from "@/api/fun/order"
import { listUser, getUser } from "@/api/system/user"
import IdSelector from "@/components/IdSelector"
import ImageUpload from "@/components/ImageUpload"

export default {
  name: "CommentForm",
  dicts: ['ec_show_status'],
  components: {
    IdSelector,
    ImageUpload
  },
  data() {
    return {
      // 提交状态
      loading: false,
      // 是否为编辑模式
      isEdit: false,
      // 表单参数
      form: {
        commentId: null,
        productId: null,
        orderId: null,
        userId: null,
        userName: null,
        star: null,
        content: null,
        images: null,
        replyContent: null,
        replyTime: null,
        showStatus: null,
        createTime: null,
        updateTime: null
      },
      // 表单校验
      rules: {
        productId: [
          { required: true, message: "商品ID不能为空", trigger: "blur" }
        ],
        orderId: [
          { required: true, message: "订单ID不能为空", trigger: "blur" }
        ],
        userId: [
          { required: true, message: "用户ID不能为空", trigger: "blur" }
        ],
        star: [
          { required: true, message: "评分不能为空", trigger: "blur" }
        ],
      }
    }
  },
  created() {
    const pageType = this.$route.query.pageType
    const commentId = this.$route.query.commentId
    if (pageType === 'edit' && commentId) {
      this.isEdit = true
      this.getCommentInfo(commentId)
    }
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        commentId: null,
        productId: null,
        orderId: null,
        userId: null,
        userName: null,
        star: null,
        content: null,
        images: null,
        replyContent: null,
        replyTime: null,
        showStatus: null,
        createTime: null,
        updateTime: null
      }
      this.resetForm("form")
    },
    /** 获取评价信息 */
    getCommentInfo(commentId) {
      getComment(commentId).then(response => {
        this.form = response.data
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.form.commentId != null) {
            updateComment(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              // 通知父页面刷新列表
                this.$eventBus.$emit('refreshCommentList')
                this.$tab.closePage()
            }).finally(() => {
              this.loading = false
            })
          } else {
            addComment(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              // 通知父页面刷新列表
              this.$eventBus.$emit('refreshCommentList')
              this.$tab.closePage()
            }).finally(() => {
              this.loading = false
            })
          }
        }
      })
    },
    /** 取消按钮 */
    cancel() {
      this.$tab.closePage()
    },
    // API方法
    listProduct,
    getProduct,
    listOrder,
    getOrder,
    listUser,
    getUser
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>